<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">全部</el-tab-pane>
      <el-tab-pane label="待接单" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="待开工" name="third">角色管理</el-tab-pane>
    </el-tabs>
    <div class="view-style">
      <el-form ref="formData" :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label prop="status">
          <el-select v-model="formData.status" placeholder="任务模版">
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="status">
          <el-select v-model="formData.status" placeholder="任务类型">
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="time">
          <el-date-picker
            v-model="formData.time"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label prop="status">
          <el-select v-model="formData.status" placeholder="派单对象">
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="status">
          <el-select v-model="formData.status" placeholder="派单方式">
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="status">
          <el-select v-model="formData.status" placeholder="结算方式">
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <div class="btns">
          <el-button type plain @click="searchClick">搜索</el-button>
          <el-button type plain @click="resetSearch">重置</el-button>
        </div>
      </el-form>
    </div>

    <!-- tables -->
    <div class="view-style">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="taskNo" label="任务编号" width="180" />
        <el-table-column prop="date" label="任务模版" width="180" />
        <el-table-column prop="taskType" label="任务类型" width="180" />
        <el-table-column prop="date" label="派单对象" width="180" />
        <el-table-column prop="workType" label="派单方式" width="180" />
        <el-table-column prop="accountType" label="结算方式" width="180" />
        <el-table-column prop="taskStatus" label="任务状态" width="180" />
        <el-table-column prop="date" label="组长" />
        <el-table-column label="派单时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.releaseTime | formatTime('{y}-{m}-{d} {h}:{i}') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="180" />
      </el-table>
    </div>
    <pagination ref="pagination" />
  </div>
</template>
<script>
const formData = {
  isMore: 0,
  items: [],
  list: [],
  orgId: '',
  pageIndex: 0,
  pageSize: 0,
  startIndex: 0,
  totalNum: 0,
  totalPage: 0
}
import pagination from '@/components/pagination'
import { listTask } from '@/api/product-ts/task'
import { pickerOptions } from '@/utils'
export default {
  components: {
    pagination
  },
  data() {
    return {
      tableData: [],
      formData: Object.assign({}, formData),
      searchData: {},
      activeName: '',
      pickerOptions: pickerOptions
    }
  },
  methods: {
    handleClick() {

    },
    // 重置搜索
    resetSearch() {
      this.$refs['formData'].resetFields()
      this.formData = Object.assign({}, formData)
      this.$refs.pagination.getData()
    },
    searchClick() {
      this.searchData = Object.assign({}, this.formData)
      this.$refs.pagination.getData()
    },
    search() {
      const params = {
        ...this.$refs.pagination.pageData,
        ...this.searchData,
        appCode: 'TY'
      }
      return new Promise(resolve => {
        listTask(params).then(res => {
          this.listLoading = false
          this.tableData = res.data.taskDtos.list
          this.dictMap = res.dictMap || {}
          resolve(res.data)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background-color: #ffffff;
}
.btns {
  float: right;
}
.view-style {
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
</style>

